<script>
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router';
import { setSessionStorage } from "@/common"
import axios from "axios";
import { ElMessage } from 'element-plus';
export default {
    setup() {
        const router = useRouter()

        const state = reactive({
            doctor: {
                docCode: "",
                password: ""
            }
        })

        function login() {
            if (state.doctor.docCode == '') {
                ElMessage({
                    type: 'warning',
                    message: '医生编码不能为空！',
                })
                return;
            }

            if (state.doctor.password == '') {
                ElMessage({
                    type: 'warning',
                    message: '密码不能为空！',
                })
                return;
            }
            axios.post('/api/doctor/login', state.doctor).then((response) => {
                console.log(response.data);
                let apires = response.data // apires  -- ApiRestResponse
                //获取服务端返回的用户信息
                let doctor = apires.data
                if (apires.status == 200) {
                    ElMessage({
                        type: 'success',
                        message: '登录成功！',
                    })
                    setSessionStorage("doctor", doctor)
                    router.push('/reportList')
                } else {
                    ElMessage({
                        type: 'error',
                        message: apires.desc,
                    })
                    return;
                }
            }).catch((error) => {
                console.log(error);
            });


        }

        return {
            ...toRefs(state),
            login
        }
    }

}
</script>

<template>
    <div class="body">
        <el-card style="max-width: 480px">
            <template #header>
                <div class="card-header">
                    <span>
                        <h2>熙心健康体检APP--医生登录</h2>
                    </span>
                </div>
            </template>
            <p class="text item">
                <el-form :model="doctor" label-width="auto" style="max-width: 600px">
                    <el-form-item label="请输入医生编码：">
                        <el-input v-model="doctor.docCode" />
                    </el-form-item>
                    <el-form-item label="请输入密码：">
                        <el-input v-model="doctor.password" />
                    </el-form-item>

                    <el-form-item style="margin-left: 15px;margin-top: 30px;">
                        <el-button style="width: 200px;" type="primary" @click="login">登录</el-button>
                        <el-button style="margin-left: 20px;width: 200px;">取消</el-button>
                    </el-form-item>
                </el-form>
            </p>
            <template #footer>
                <div style="text-align: center; font-size: 12px;">@XiXin 2024-09-24</div>
            </template>
        </el-card>
    </div>


</template>



<style scoped>
.body {
    width: 100%;
    height: 100vh;
    background-color: #D3DCE6;
    display: flex;
    /* 使用 Flexbox */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.el-card {
    width: 480px;
    margin-top: -100px;
}
</style>